import { xhlGet } from '../../utils/request.js'

Page({
  data: {

  },

  // 搜索内容事件处理函数
  searchHandler(val) {
    // 模糊搜索
    // 需要搜索两个内容
    //   1. 分类列表
    //   2. 商品列表

    // 1. 测试请求
    // xhlGet('/goods', { title_like: val })
    // .then(res => console.log(res))
    // xhlGet('/categories', { title_like: val })
    // .then(res => console.log(res))

    // 2. 需要等到两个请求结束才能返回最终结果
    // 借助一个 Promise.All 的方法
    // 语法: Promise.all([ 第一个异步Promise, 第二个异步Promise, ... ])
    //      .then()
    // then 出发的时机, 是 all 的时候, 所有的 promise 都完成以后才会触发

    return Promise
      .all([
        xhlGet('/categories', { title_like: val }),
        xhlGet('/goods', { title_like: val })
      ])
      .then(res => {
        // console.log('响应结果', res)
        // 拿到两个请求的响应结果
        // 组装一个我们需要的数据结构
        // return [ { value: 所属的 id, text: 展示的文本内容 } ]
        // 1. 把两个数组合并成为一个数组
        // 使用 js 方法. concat()
        // 语法: 数组.concat(数组2)
        // console.log('合并结果', res[0].concat(res[1]))
        // 2. 对数组进行映射
        // console.log('合并结果', res[0].concat(res[1]).map(item => {
        //   return {
        //     text: item.title,
        //     value: item.id // 记住: 当你是商品的时候, 是 商品 id, 当你是分类的时候, 是 分类 id
        //   }
        // }))

        return res[0].concat(res[1]).map(item => {
          return {
            text: item.title,
            value: item.id, // 记住: 当你是商品的时候, 是 商品 id, 当你是分类的时候, 是 分类 id
            type: item.class ? 1 : 2 // 自己使用, 用来区分是 分类 还是 商品
          }
        })
      })
  },

  // 点击搜索结果的时候触发的函数
  resultHandler(e) {
    // console.log('你点击了某一个结果', e.detail.item)
    // 点击不同的内容做不同的事情
    // 点击的事商品, 跳转到 商品详情
    // 点击的事分类, 跳转到 搜索列表
    if (e.detail.item.type === 1) {
      // 表示你点击的事分类
      wx.navigateTo({ url: '/pages/SearchList/SearchList?id=' + e.detail.item.value + '&title=' + e.detail.item.text })
    } else {
      // 表示你点击的事商品
      wx.navigateTo({ url: '/pages/Detail/Detail?id=' + e.detail.item.value + '&title=' + e.detail.item.text })
    }
  },

  onLoad() {
    // 不需要 search 函数立即调用, 而是在你搜索的时候进行调用
    // 需要使用 bind 改变函数内的 this 指向
    // search 函数虽然传递到 mp-searchbar 组件内使用, 但是该函数内的 this 依旧指向当前 Search 页面
    this.setData({ searchHandler: this.searchHandler.bind(this) })
  }
})

/* search 函数不触发的问题 
  + JS 内 this 指向的机制
  + this 这个关键字指向执行环境的宿主环境
    => 函数内才有 this 关键字
    => thia 关键字要看函数执行的时候决定

  函数名() => 指向全局
  对象名.函数名() => 指向对象

  <input bing:input="handler"/>
    => 直接使用 hanlder 函数
    => 全局就是当前 Page, 该函数内的 this 指向当前 Page
    => 你可以直接使用 this.data.xxx
    => 你可以直接使用 this.setData()
  <mp-searchbar search="{{  }}">
    => <xhl-test list="{{ 数组 }}" search="{{ 函数 }}" >
      properties: {
        list: { type: Array },
        search: { type: Function }
      }

      fn() {
        this.properties.search()
      }
    => 在当前这个 Page 内
      -> 把 search 函数传递到 xhltest 组件内部使用
      -> 调用也是在 xhl-test 内部调用
      -> 该函数内的 this 指向 xhl-test 这个组件了
      -> 不在是当前 page

  JS 内的一个机制: call/apply/bind
    => 作用: 专门用来改变 this 指向的
    => 区别: call/apply 是立即调用函数
              bind 不会立即调用函数, 而是返回一个锁定好 this 指向的新函数

*/